<template>
	<div>
		<el-row>
			<el-tabs v-loading="loading" @tab-click='tabclick' type="border-card">
				<el-tab-pane v-for="(item,index) in tab_form.tab_list" :key="index" :label="item">
					<el-row>
						<el-table :data="tableData[index]" style="width: 100%">
							<el-table-column type="expand">
								<template slot-scope="props">
									<el-form style="padding:0 40px;" label-position="left" inline
										class="demo-table-expand">
										<template v-if="index == 0">
											<el-form-item label="Description">
												<span>{{ props.row.Description }}</span>
											</el-form-item>
											<el-form-item label="phonenum">
												<span>{{ props.row.phonenum }}</span>
											</el-form-item>
											<el-form-item label="Type">
												<span>{{ props.row.Type }}</span>
											</el-form-item>
											<el-form-item label="datetime">
												<span>{{ props.row.datetime }}</span>
											</el-form-item>
											<el-form-item label="Price">
												<span>{{ props.row.Price }}</span>
											</el-form-item>
											<el-form-item label="State">
												<span>{{ props.row.State }}</span>
											</el-form-item>
											<el-form-item label="price">
												<span>{{ props.row.price }}</span>
											</el-form-item>
											<el-form-item label="name">
												<span>{{ props.row.name }}</span>
											</el-form-item>
											<el-form-item label="ImagePath">
												<el-image style="width: 100px; height: 100px" :src="$url+props.row.ImagePath">
												</el-image>
											</el-form-item>
										</template>
										<template v-if="index == 2">
											<el-form-item label="Description">
												<span>{{ props.row.Description }}</span>
											</el-form-item>
											<el-form-item label="phonenum">
												<span>{{ props.row.phonenum }}</span>
											</el-form-item>
											<el-form-item label="Type">
												<span>{{ props.row.Type }}</span>
											</el-form-item>
											<el-form-item label="datetime">
												<span>{{ props.row.datetime }}</span>
											</el-form-item>
											<el-form-item label="Price">
												<span>{{ props.row.Price }}</span>
											</el-form-item>
											<el-form-item label="State">
												<span>{{ props.row.State }}</span>
											</el-form-item>
											<el-form-item label="price">
												<span>{{ props.row.price }}</span>
											</el-form-item>
											<el-form-item label="name">
												<span>{{ props.row.name }}</span>
											</el-form-item>
											<el-form-item label="ImagePath">
												<el-image style="width: 100px; height: 100px" :src="$url+props.row.ImagePath">
												</el-image>
											</el-form-item>
										</template>
									</el-form>
								</template>
							</el-table-column>
							<template v-if="index == 0">
								<el-table-column label="name" prop="name"></el-table-column>
								<el-table-column label="Title" prop="Title"></el-table-column>
								<el-table-column label="Type" prop="Type"></el-table-column>
								<el-table-column label="Price" prop="Price"></el-table-column>
								<el-table-column label="State" prop="State"></el-table-column>
							</template>
							<template v-if="index == 2">
								<el-table-column label="name" prop="name"></el-table-column>
								<el-table-column label="Title" prop="Title"></el-table-column>
								<el-table-column label="Type" prop="Type"></el-table-column>
								<el-table-column label="Price" prop="Price"></el-table-column>
								<el-table-column label="State" prop="State"></el-table-column>
							</template>
							<el-table-column label="Operation">
								<template slot-scope="scope">
									<el-button v-if="index == 0" type="danger" size="small">强制下架</el-button>
									<el-button v-if="index == 1" type="primary" size="small">加入批次</el-button>
									<el-button v-if="index == 2" type="danger" size="small">删除</el-button>
									<el-button v-if="index == 3" type="success" size="small">处理</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-row>
					<el-row style="margin: 20px 0 ;" type="flex" justify="center">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page.sync="pagination_form.currentPage3" :page-size="100" :hide-on-single-page="true"
							layout="prev, pager, next, jumper" :total="1000" background>
						</el-pagination>
					</el-row>
				</el-tab-pane>
			</el-tabs>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				loading:false,
				
				pagination_form:{
					currentPage3: 1,//当前页
				},

				tab_form: {
					tab_in: 0, //当前tab
					tab_list: [ //tab的列表
						'Unsold Srecord',
						'上架',
						'完成',
						'流拍'
					],
				},

				tableData: {//列表数据
					0: [{}],
					1: [{}],
					2: [{}],
					3: [{}]
				}
			}
		},
		mounted() {
			this.post_SrecordQueryall()
		},
		methods: {
			
			// 拍卖中 上
			async post_SrecordQueryall(page=1,pagesize=1){//查看拍卖中的列表
				this.loading = true
				let data = await this.$model.post('/srecord/queryall',{
					page:page,
					pagesize:pagesize
				})
				if(data.msg == 'success'){
					this.tableData[0] = data.pageInfo.list
					this.pagination_form.currentPage3 = 1
					this.loading = false
				}
			},
			
			async post_SellerQuery(page=1,pagesize=1){ //查看已拍卖完成的列表
				this.loading = true
				let data = await this.$model.post('/seller/query',{
					page:page,
					pagesize:pagesize
				})
				if(data.msg == 'success'){
					this.tableData[2] = data.pageInfo.list
					this.pagination_form.currentPage3 = 1
					this.loading = false
				}
			},
			// 拍卖中 下
			
			
			
			tabclick(res) { //tab点击事件
				switch(res.index){
					case '0':
						this.post_SrecordQueryall()
						break
					case '2':
						this.post_SellerQuery()
						break
				}
			},

			//分页 上
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			//分页 下




		}
	}
</script>

<style>
	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}
</style>
